import Selecto from 'selecto'
import Moveable from 'moveable';
var targets: (HTMLElement | SVGElement)[] = [];
export default class CustomSelecto {
  static create(moveable: Moveable, main: string, dragContainer: string) {
    const container: HTMLElement = document.querySelector(main)
    const selecto = new Selecto({
      container: container,
      // dragContainer: dragContainer,
      // keyContainer: container,
      selectableTargets: [`${dragContainer} .cube`, `${dragContainer} .widget`],
      hitRate: 0,
      selectByClick: true,
      // 相交
      selectFromInside: true,
      continueSelect: false,
      toggleContinueSelect: ['shift'],
      ratio: 0
      // getElementRect: getElementInfo
    })

    selecto.on('dragStart', e => {
      console.log('开始')
      const target = e.inputEvent.target;
      if (
        moveable.isMoveableElement(target) || targets.some(t => t === target || t.contains(target))
      ) {
        e.stop();
      }
    }).on('selectEnd', e => {
      targets = e.selected;
      // @ts-ignore
      moveable.target = targets;
      console.log('selectEnd',moveable.target)


      if (e.isDragStart) {
        e.inputEvent.preventDefault();

        setTimeout(() => {
          moveable.dragStart(e.inputEvent);
        });
      }
    });

    selecto.on('select', e => {
      e.added.forEach(el => {
        el.classList.add('selected')
      })
      e.removed.forEach(el => {
        el.classList.remove('selected')
      })
    })
  }
}